<template>
  <div class="chart">
    <div class="no-data"
         v-show="barChartData.length===0">暂无数据</div>
    <div id="barChart"
         ref="barChart"
         class="bar-chart"
         v-show="barChartData.length>0"></div>
    <!-- <area-hours-data-chart :chartData="hourChartData"
                           :areaId="areaId"
                           :filialeOrOrgan="filialeOrOrgan"
                           :dataIndex="dataIndex"
                           :titleName="titleName"
                           :showUI.sync="showHoursData"></area-hours-data-chart> -->
  </div>
</template>

<script>
import * as echarts from 'echarts';
//import AreaHoursDataChart from '@/pages/admin/components/AreaHoursDataChart'
var myChart = null
var option = {
  stack: 'total',
  // color: [
  //   '#2196F3', '#00BCD4', '#009688', '#4CAF50',
  //   '#3F51B5', '#303F9F', '#01579B', '#0288D1', '#03A9F4',
  // ],
  
	color: [
		'#44c8f4',
		'#8fddf7',
		'#23cba7',
		'#ffd570',
		'#7f95fa',
		'#3afac1',
		'#1a7dd0',
		'#2196F3',
		'#00BCD4',
	],
  title: {
    text: '用电量统计',
    left: '2%',
    top: '5%',
    textStyle: {
      color: '#fff',
      fontSize: '0.12rem',
      fontWeight:"normal"
    },
  },
  legend: {
    top: 15,
    left: '25%',
    bottom: 8,
    textStyle: {
      // fontSize: 13,//字体大小
      color: '#ffffff'//字体颜色
    },
     type: "scroll",
    pageTextStyle: {
      color: "rgba(255, 255, 255, 1)"
    },
    pageIconColor: "rgba(255, 255, 255, 1)"
  },

  tooltip: {
    trigger: 'axis',
    axisPointer: {            // Use axis to trigger tooltip
      type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
    },
     formatter: function (params) {
    console.log()
      //  let dateTime=new Date();
      //  let diff = params[0].dataIndex + 1 -new Date().getDay()
      //   dateTime=dateTime.setDate(dateTime.getDate() + diff);
      //   dateTime=new Date(dateTime);
       let htmldata=`${params[0].axisValue}
        `
       for(let item of params)
       {
         htmldata+=`<br> ${item.marker}用电量：${item.data}`
       }
       
        return htmldata
        },
  },
  grid: {
    left: '20%',
    bottom: '12%',
  },
  xAxis: {
    name: '度',
    nameLocation: 'end',
    nameTextStyle: {
      color: '#ffffff'
    },
    type: 'value',
    axisTick: {
      show: true,
      inside: true
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: '#ffffff'
      }
    },
    axisLine: {
      lineStyle: {
        color: '#24a8ac'
      }
    },
    splitLine: {
      show: false     //去掉网格线
    }

  },
  yAxis: {
    type: 'category',
    data: [],
    axisLabel: {
      show: true,
      textStyle: {
        color: '#ffffff'
      }
    },
    axisLine: {
      lineStyle: {
        color: '#24a8ac'
      }
    },
    axisTick: {
      show: true,
      inside: true
    },
    splitLine: {
      show: false     //去掉网格线
    }
  },
  series: [
  ]
};
export default {
  name: "index",
  props: {
    barChartData: {
      type: Array
    }
  },
  data () {
    return {
      showHoursData: false,
      hourChartData: {},
      areaId: 0,
      filialeOrOrgan: '',
      dataIndex: 0,
      titleName:''
    }
  },
  components: {
    //AreaHoursDataChart
  },
  mounted () {
    myChart = echarts.init(document.getElementById('barChart'));
    myChart.setOption(option);
    // myChart.on('click', (params) => {
    //   let { id, filialeOrOrgan } = this.barChartData[params.seriesIndex]
    //   this.areaId = id
    //   this.filialeOrOrgan = filialeOrOrgan
    //   this.dataIndex = params.dataIndex
    //   this.titleName = params.seriesName
    //   this.showHoursData = true
    // })
  },
  methods: {
    // 对数据进行处理
    dealData () {
      myChart.clear()
      let series = []
      
      let ydata=[]
      let obj = {}
      obj.type = 'bar'
      obj.data=[]
      for (let i in this.barChartData) {
        obj.stack = 'total'
        obj.emphasis = { focus: 'series' }
        obj.data.push(this.barChartData[i].value<0?0: (this.barChartData[i].value / 1000))
        
        ydata.push(this.barChartData[i].time)
      }
      series.push(obj)
      option.series = series
      option.yAxis.data = ydata
      myChart.setOption(option, true);
    },
  },
  watch: {
    barChartData (val) {
      // console.log('admin/components/ElectricQunantityBarChart', val)
      this.dealData()
    }
  }
}
function getFormatDate(nowDate) {
    let date = nowDate
    let month = date.getMonth() + 1
    let strDate = date.getDate()
    let hours = date.getHours()
    let minutes = date.getMinutes()
    let seconds = date.getSeconds()
    if (month >= 1 && month <= 9) {
        month = '0' + month
    }
    if (strDate < 10) {
        strDate = '0' + strDate
    }
    if (hours < 10) {
        hours = '0' + hours
    }
    if (minutes < 10) {
        minutes = '0' + minutes
    }
    if (seconds < 10) {
        seconds = '0' + seconds
    }
    let currentDate = date.getFullYear() + '-' + month + '-' + strDate
    // console.log(currentDate)
    return currentDate
}
</script>

<style scoped lang="stylus">
.bar-chart {
  width: 5.66rem;
  height: 3.25rem;
}

.no-data {
  text-align: center;
  height: 3.25rem;
  line-height: 3.52rem;
}
</style>